<!DOCTYPE html>
<html>

<head>
    <meta>

    <title>键盘相关</title>
    <script src="../js/vue.js" ,type="text/javascript"></script>
</head>

<body>
    <div id="root">
        <h1>:{{name}}</h1>
        <input type="text" placeholder="请输入啊 速度" @key.enter="keyupmethod">
        <!-- @keydown="keydownmethod" -->
    </div>


</body>

<script type="text/javascript">
    Vue.config.productionTip = false

    new Vue({
        el: '#root',
        data() {
            return {
                name: "阿文"
            }
        },
        methods: {
            keyupmethod(e) {
                console.log(e.target.value)
                console.log(e.key, e.keyCode)
            },
            keydownmethod(e) {
                console.log(event.target.value)
            }
        },
    })
</script>

</html>



<!-- 案件别名vue  
回车 enter
删除 delete  删除和退格键
退出 esc
空格 space
换行 tab
上 up
下 down
左 left
右 right

2.vue没提供别名的案件，可以使用按键原始的key 值去绑定 但注意要转为kebab-case  短横线命名

3、系统修饰符  ctrl alt  shift meta
（1）keyup  按下修饰同时  再按下其他键 随后释放掐键 才会触发
（2）keydown 正常  tab必须配down

4、keycode 指定其他键 不推荐
5. vue。config。keycode 自定义键名  = 键码 可以去指定按键别名

caps-lock CapsLock
-->